<template>
  <div class="computed">
    <button  @click="num++">买驴</button>
    <p>驴的数量{{ num }}头</p>
    <p>蹄子的数量:{{ num * 4 }}个</p>
    <!-- 计算属性的插值绑定不需要加括号 -->
    <p>蹄子的数量:{{ legNum }}个</p>
    <p>蹄子的数量:{{ legNum }}个</p>
    <p>蹄子的数量:{{ legNum }}个</p>
    <p>蹄子的数量:{{ legNum }}个</p>
    <form>
      <label>
        <input type="checkbox" value="男" v-model="formData.gender" />男士
      </label>
      <label>
        <input type="checkbox" value="女" v-model="formData.gender" />女士
      </label>
      <input v-model="formData.height" placeholder="身高" />
    </form>
    <ul>
      <li
        v-for="d in filterList"
        :key="d.name"
      >
        {{ d.name }}
        {{ d.gender }}
        {{ d.height }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        num: 2, //驴的数量
        list:[
          {
            name:"小红",
            gender:'女',
            height: 180
          },
          {
            name:"小白",
            gender:'男',
            height: 120
          },
          {
            name:"小蓝",
            gender:'女',
            height: 160
          },
          {
            name:"小黑",
            gender:'男',
            height: 150
          }
        ],
        formData:{
          gender:[],
          height:''
        }
      }
    },
    computed:{
      //计算属性是个方法,必须有返回值
      // 计算属性有缓存,依赖发生变化时,才会重新计算
      legNum(){
        console.log('计算');
        return this.num * 4
      },
      filterList(){
        return this.list.filter(i=>{
           return this.formData.gender.includes(i.gender) && this.formData.height <= i.height
        });
      }
    }
  }
</script>

<style lang="sass" scoped>

</style>
